<template>
    <div v-if="detailStatus" class="m-detail-modal">
        <div class="header">
            意向车商详情
            <span @click="close"><Icon type="close-round"></Icon></span>
        </div>
        <Card>
        <div class="content">
            <div class="list-header">基本信息:</div>
            <Row class-name="list-row"v-if="imgStatus">
                <Col span="12">
                门头照：<div><img :src="imgTop1"  style="width: 200px;height: 200px"></div>
                </Col>
                <Col span="12">
                展厅照：<div><img :src="imgTop2"  style="width: 200px;height: 200px"></div>
                </Col>
            </Row>
            <Row class-name="list-row">
                <Col span="12">
                车商分类：<span>{{detailData.title}}</span>
                </Col>
                <Col span="12">
                车行名称：<span>{{detailData.dealerName=='' ? '未知':detailData.dealerName}}</span>
                </Col>
            </Row>
            <Row class-name="list-row">
                <Col span="12">
                车商名称：<span>{{detailData.customerName == '' ? '匿名':detailData.customerName}}</span>
                </Col>
                <Col span="12">
                电话号码：<span>{{detailData.dealerTel}}</span>
                </Col>
            </Row>
            <Row class-name="list-row">
                <Col span="12">
                所属市场：<span>{{detailData.bazaarName || '未分配'}}</span>
                </Col>
                <Col span="12">
                业务员：<span>{{detailData.staffName || '未分配'}}</span>
                </Col>
            </Row>
            <Row class-name="list-row">
                <Col span="12">
                是否办理金融业务：<span>{{detailData.financing==1?'已办理':'未办理'}}</span>
                </Col>
                <Col span="12">
                门市地址：<span>{{detailData.dealerAdd || ''}}</span>
                </Col>
            </Row>
            <Row class-name="list-row">
                <Col span="12">
                创建时间：<span>{{detailData.createTime || ''}}</span>
                </Col>
                <Col span="12">
                更新时间：<span>{{detailData.updateTime || ''}}</span>
                </Col>
            </Row>
            <Row class-name="list-row">
                <Col span="24">
                备注：<span>{{detailData.remark || ''}}</span>
                </Col>
            </Row>


        </div>
        </Card>
        <Card>
            <div class="list-header"> 跟进记录:</div>
        <Table border showStripe :columns="columns" :data="recordData" ></Table>
        </Card>
        <div style="position: relative">
            <Page style="text-align: right;padding-top: 10px;"
                  :page-size="searchData.pagesize"
                  @on-page-size-change="pageSizeFn"
                  @on-change="pageFn"
                  :total="total" show-sizer show-total></Page>
        </div>

        <Card>
            <div class="list-header"> 金融意向记录:</div>
            <Table border showStripe :columns="columns1" :data="inDataPrice" ></Table>
        </Card>

        <div style="position: relative">
            <Page style="text-align: right;padding-top: 10px;"
                  :page-size="searchData2.pagesize"
                  @on-page-size-change="pageSizeFn2"
                  @on-change="pageFn2"
                  :total="total2" show-sizer show-total></Page>
        </div>
    </div>
</template>

<script>
    import qs from 'qs'
    export default {
        props: ['detailStatus', 'detailData', "test"],
        watch: {
            test(val) {

                if(this.detailData.imageList.length==2){
                    this.detailData.imageList.map((item)=>{
                        if(item.imageType==1){
                            this.imgTop1=item.imageAdd;
                        }else{
                            this.imgTop2=item.imageAdd;
                        }
                    });
                    this.imgStatus=true;
                }else {
                    this.imgStatus=false;
                }
                this.getRecordData(this.detailData.indId);
                this.getInData(this.detailData.indId)
            }
        },
        data() {
            return {
                imgTop1:'',
                imgTop2:'',
                imgStatus:false,
                searchData:{
                    pagesize: 1,
                    pagenum: 10,
                    type:'1'
                },
                searchData2:{
                    pagesize: 1,
                    pagenum: 10,
                    type:'1'
                },
                total:0,
                total2:0,
                recordData:[],
                inDataPrice:[],
                columns:[{
                    title: '跟进时间',
                    key: 'visitTime',
                    width:320
                },
                    {
                        title: '业务员名',
                        key: 'staffName',
                        width:320
                    },
                    {
                        title: '跟进记录',
                        key: 'remark',
                        width:800
                    }
                ],
                columns1: [
                    {
                        title: '跟进时间',
                        key: 'createTime',
                        width:220
                    },
                    {
                        title: '金融产品',
                        key: 'financial',
                        width:220
                    },
                    {
                        title: '业务员名',
                        key: 'staffName',
                        width:220
                    },
                    {
                        title: '跟进记录',
                        key: 'remark',
                        width:800
                    }
                ]
            }
        },
        methods: {
            close() {
                this.$emit('closeModal')
            },
            pageSizeFn(size) {
                this.searchData.pagesize = size;
                this.getRecordData();
            },
            pageFn(pageNum) {
                this.searchData.pagenum = pageNum;
                this.getRecordData();
            },
            pageSizeFn2(size) {
                this.searchData2.pagesize = size;
                this.getInData();
            },
            pageFn2(pageNum) {
                this.searchData2.pagenum = pageNum;
                this.getInData();
            },
            getRecordData(indId){
                let  params = qs.stringify( this.searchData);
                this.axios.get( process.env.API_ZSCAR+"/indeal/visitList?indId="+indId+"&"+ params).then(response=>{
                    if (response.data.code === 1) {
                        let res = response.data.data;
                        this.total=response.data.data.total;
                        this.recordData=res.list;

                    } else {
                        this.$Message.error(response.data.msg);
                    }
                },error=>{
                });
            },
            getInData(indId){
                let  params = qs.stringify( this.searchData2);
                this.axios.get( process.env.API_ZSCAR+"/indeal/financialList?dealerId="+indId+"&"+ params).then(response=>{
                    if (response.data.code === 1) {
                        let res = response.data.data;
                        this.total2=response.data.data.total;
                        this.inDataPrice=res.list;

                    } else {
                        this.$Message.error(response.data.msg);
                    }
                }, error=>{
                    this.$Message.error(response.data.msg);
                });
            }
        },

    }
</script>
<style lang="scss" scoped>
    .m-detail-modal {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        z-index: 100;

        .header {
            background-color: #f8f8f9;
            height: 45px;
            line-height: 45px;
            font-size: 16px;
            padding-left: 25px;
            padding-right: 5px;
            color: #000;
            box-shadow: 1px 1px 1px rgba(220, 172, 172, .5);

            span {
                float: right;
                padding: 0 20px;
                cursor: pointer;
            }

        }
        .content {
            font-size: 14px;
            padding: 15px 50px 150px 25px;
            height: 100%;
            overflow-y: auto;
        }

        .list-header {
            height: 45px;
            color: #333;
            line-height: 45px;
        }

        .list-row {
            padding-left: 100px;
            font-size: 14px;
            line-height: 40px;
        }
        .list-row img {
            width: 100px;
            height: auto;
        }
        .car-header {
            background-color: #f7f7f7;
            padding-left: 15px;
            border: 1px solid #e9eaec;
            border-radius: 2px;
        }

    }
</style>
